<template>
	<div class="scene-wrap">
		<div class="scene-wrap__header">节目</div>
		<el-scrollbar class="scene-wrap__content">
			<draggable v-model="_list" draggable=".item">
				<transition-group>
					<div class="item" :class="{ hover: showId === item.uuid }" v-for="(item, idx) in list" :key="item.uuid" @mouseenter="showId = item.uuid" @mouseleave="showId = ''">
						<div class="color000Box copyIconPosi" ref='copyText'>
							<div class="triangle-right"></div>复制</div>
						<div class="color000Box delIconPosi" ref='delText'>
							<div class="triangle-right"></div>删除</div>
						<div class="control-wrap">
							<i class="iconfont icon-copy coypIconHover " @click="onRequestScenesChange({ cmd: 'copy', scene: item, dialog:false,idx:idx })" @mouseover="copyIconmouseOver(idx)" @mouseleave="copyIconmouseLeave(idx)"></i>
							<i class="iconfont icon-delete delconHover " @click="deleteScene(item.uuid)" @mouseover="delIconmouseOver(idx)" @mouseleave="delIconmouseLeave(idx)"></i>

						</div>
						<div class="order" :class="{ active: selectedId === item.uuid }">
							<span>{{ idx + 1 }}</span>
						</div>
						<div class="content" @click="onRequestScenesChange({ cmd: 'change', uuid: item.uuid, dialog: false })">
							<div class="time-item">{{ changeTime(item.duration) }}</div> 
							<!-- <div class="time-item">{{ item.duration >= 10 ? item.duration : '10' }}</div> -->
							<div class="preview-wrapper">
								<div class="components-wrap" id="components-wrap" :style="{ transform: 'scale(' + previewScale + ')', width: pageData.width + 'px', height: pageData.height + 'px', left: previewLeft + 'px' }">
									<div class="inner" :style="getCommonStyle(item.commonStyle)">
										<div class="components-shape" v-for="el in item.elements" :key="el.uuid" :style="getCommonStyle(el.commonStyle)">
											<component class="components-item" :is="el.elName" v-bind="{ ...el.propsValue, ...{value: el.value, play:false} }" />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="scene-text">
							<span class="txt-el" v-if="!editItem || editItem.uuid !== item.uuid" v-html="item.name" :title="item.name"></span>
							 <span>-{{idx+1}}</span> 
							<i class="iconfont icon-edit" @click="setEditId(item)" v-if="!editItem"></i>
							<div class="edit-form" v-if="editItem && editItem.uuid === item.uuid">
								<!-- <el-time-picker
                  size="small"
                  v-model="_editTime"
                  :picker-options="{
                        selectableRange: '0 - 00:00:59'
                      }"
                  ref="timer">
                </el-time-picker> -->
								<el-input size="small" v-model="_editTime" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="timeBlur" ref="timer"></el-input>

								<el-input size="small" v-model="_editTitle" />
								<div class="btn-wrap">
									<i class="iconfont icon-right" @click="onEditSave"></i>
									<i class="iconfont icon-wrong" @click="editItem = null"></i>
								</div>
							</div>
						</div>
					</div>
				</transition-group>
			</draggable>
		</el-scrollbar>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	import { Message } from 'element-ui';
	import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
	import { getCommonStyle } from '@/utils';
	import editPanelMixin from '@/mixins/edit-pannel-mixin.js';
	export default {

		components: {
			draggable,
			'edit-item': () =>
				import('@/components/edit-item')
		},
		props: {
			list: {
				type: Array,
				default() {
					return [];
				}
			},
			selectedId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				elems: [],
				showId: '',
				editItem: null,
				previewScale: 0.052,
				previewLeft: 0
			};
		},

		computed: {
			...mapState('programs', ['pageData', 'currElementUUID', 'currSceneUUID', 'scenes']),
			...mapGetters('programs', ['currScene']),
			_list: {
				get() {
					return this.list;
				},
				set(val) {
					this.updateProgramScenes(val);
				}
			},
			_editName() {
				const {
					editItem,
					list
				} = this;
				if(editItem.name) {
					return editItem.name;
				}
				const i = list.find(item => item.uuid === editItem.uuid);
				return i ? i.name : '';
			},
			_editTitle: {
				get() {
					const {
						editItem
					} = this;
					return editItem.name;
				},
				set(val) {
					this.editItem.name = val;
					/* if(val == null){
					  this.editItem.duration = "0";
					}else{
					  this.editItem.duration = this.$moment(val).format('HH:mm:ss')
					} */
				}
			},
			_editTime: {
				get() {
					const {
						editItem
					} = this;
					return editItem.duration;
					/* const _d = this.$moment(new Date()).format('YYYY/MM/DD')
					return new Date(`${_d} ${editItem.duration}`) */
				},
				set(val) {
					this.editItem.duration = val;
					/* if(val == null){
					  this.editItem.duration = "0";
					}else{
					  this.editItem.duration = this.$moment(val).format('HH:mm:ss')
					} */
				}
			},
		},
		watch: {
			currScene: {
				deep: true,
				immediate: true,
				handler(v1, v2) {
					if(v1 && v1.elements) {
						this.elems = [...v1.elements];
					} else {
						this.elems = [];
					}
					this.$nextTick(() => {
						if(this.pageData.width > this.pageData.height) {
							this.previewScale = 100 / this.pageData.width;
						} else {
							this.previewScale = 56 / this.pageData.height;
							this.previewLeft = 100 / 2 - ((this.previewScale * (document.getElementById('components-wrap').offsetWidth))) / 2;
						}
					});
				}
			}
		},
		created() {
			this.initData();
		},
		mixins: [editPanelMixin],
		methods: {
			changeTime(seconds) {
				
				let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
				seconds -= 3600 * hour;
				let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
				seconds -= 60 * min;
				let sec = seconds >= 10 ? seconds : '0' + seconds;
				return hour + ':' + min + ':' + sec;
			},
			copyIconmouseOver(idx) {
				//				this.copyTextShow=true;
				this.$refs.copyText[idx].style.display = 'block';
			},
			copyIconmouseLeave(idx) {
				//				this.copyTextShow=false;
				this.$refs.copyText[idx].style.display = 'none';
			},
			delIconmouseOver(idx) {
				//				this.delTextShow=true;
				this.$refs.delText[idx].style.display = 'block';
			},
			delIconmouseLeave(idx) {
				//				this.delTextShow=false;
				this.$refs.delText[idx].style.display = 'none';
			},
			...mapActions('programs', ['setDurationLen', 'setUpadateScenesDurationValue']),
			getCommonStyle,
			...mapMutations('programs', ['setCurrSceneUUID', 'deleteScene', 'updateProgramScenes']),
			initData() {},
			itemStyle(item) {
				if(item.coverUrl) {
					return {
						background: `url(${item.coverUrl}) no-repeat`,
						backgroundSize: 'cover'
					};
				} else {
					return {};
				}
			},
			setEditId(item) {
				this.onRequestScenesChange({
					cmd: 'change',
					uuid: item.uuid,
					dialog: false
				})
				this.editItem = {
					uuid: item.uuid,
					name: item.name,
					duration: item.duration ? item.duration : '0'
				};
			},
			timeBlur() {
				if(this.editItem.duration < 10) {
					this.editItem.duration = '10';
				}
			},
			onBlur(val) {
				this.editItem.name = val;
			},
			onEditSave() {
				const {
					list,
					editItem
				} = this;
				const i = list.find(item => item.uuid === editItem.uuid);
				const hasName = this.scenes.find(item => (item.name === editItem.name && item.uuid !== editItem.uuid));
				if(hasName) {
					Message.error("保存失败，节目名称重复！");
					return false;
				}
				if(i) {
					this.setDurationLen(editItem.duration, true);
					this.setUpadateScenesDurationValue({
						uuid: editItem.uuid,
						data: {
							name: editItem.name,
							duration: editItem.duration
						}
					});
				}
				this.editItem = null;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '../../assets/scss/variables';
	.scene-wrap {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 100%;
		&__header {
			height: 41px;
			width: 100%;
			line-height: 40px;
			font-size: 14px;
			color: #4c4c4c;
			text-align: center;
			background-color: #fff;
			border-bottom: 1px solid #b9b9b9;
		}
		&__content {
			position: relative;
			display: flex;
			flex-direction: column;
			height: 100%;
			margin-bottom: 60px;
			.item {
				position: relative;
				width: 100%;
				height: 161px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				color: #fff;
				font-size: 12px;
				border-bottom: 1px solid #b9b9b9;
				cursor: pointer;
				.color000Box {
					position: absolute;
					z-index: 9999;
					border-radius: 4px;
					background: #303133;
					color: #FFF;
					padding: 10px;
					min-width: 10px;
				}
				.triangle-right {
					width: 0;
					height: 0;
					border-top: 5px solid transparent;
					border-left: 5px solid #303133;
					border-bottom: 5px solid transparent;
					position: absolute;
					right: -11%;
					top: 0;
					bottom: 0;
					margin: auto;
				}
				.copyIconPosi {
					right: 21%;
					top: 32%;
					display: none;
				}
				.delIconPosi {
					right: 21%;
					top: 47%;
					display: none;
				}
				.order {
					width: 20px;
					height: 18px;
					margin-bottom: 8px;
					text-align: center;
					vertical-align: middle;
					color: $white;
					font-size: 14px;
					line-height: 18px;
					background: #b9b9b9;
					&.active {
						background: $primary;
					}
				}
				.control-wrap {
					height: 100%;
					position: absolute;
					right: 10px;
					flex-direction: column;
					justify-content: center;
					display: none;
					.iconfont {
						display: block;
						width: 20px;
						height: 20px;
						margin: 2px 0;
						text-align: center;
						background: #666;
						z-index: 106;
						cursor: pointer;
					}
				}
				&.hover {
					.control-wrap {
						display: flex;
					}
					.scene-text {
						.iconfont {
							display: block;
						}
					}
				}
				.content {
					position: relative;
					width: 100px;
					height: 100px;
					background-color: #d9d9d9;
					align-self: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.time-item {
						position: absolute;
						bottom: 0;
						height: 24px;
						line-height: 24px;
						width: 100%;
						text-align: center;
						color: #444444;
						font-size: 12px;
						z-index: 10;
					}
				}
				.preview-wrapper {
					position: absolute;
					width: 100px;
					height: 56.25px;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					background: #ffffff;
					background-size: cover !important;
				}
				.components-wrap {
					position: absolute;
					transform-origin: left top;
					.inner {
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				.components-shape {
					position: absolute;
				}
				.components-item {
					width: 100%;
					height: 100%;
					overflow: hidden;
					position: relative;
				}
				.scene-text {
					width: 100%;
					height: 24px;
					line-height: 24px;
					margin-top: 5px;
					display: flex;
					flex-direction: row;
					text-align: center;
					font-size: 12px;
					color: #4c4c4c;
					justify-content: center;
					align-items: center;
					span {
						max-width: 70%;
						height: 24px;
					}
					.icon-edit {
						display: none;
						width: 20px;
						height: 20px;
						line-height: 20px;
						margin: 2px 0 2px 5px;
						text-align: center;
						vertical-align: middle;
						background: #666;
						z-index: 106;
						color: #ffffff;
						cursor: pointer;
					}
				}
			}
		}
	}
</style>
<style lang="scss">
	.scene-wrap {
		.edit-item-wrap {
			justify-content: center;
			.editable[contenteditable='true'] {
				background: #eeeeee;
			}
		}
		.edit-form {
			width: 100%;
			height: 80%;
			position: absolute;
			bottom: 0;
			background: #dcdcdc;
			z-index: 200;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding: 5px;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
			.edit-item-wrap {
				min-height: 24px !important;
				max-height: 48px !important;
			}
			.btn-wrap {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				.iconfont {
					width: 16px;
					height: 16px;
					line-height: 16px;
					margin: 2px 0 2px 5px;
					text-align: center;
					vertical-align: middle;
					background: #666;
					color: #ffffff;
					cursor: pointer;
					font-size: 12px;
				}
			}
			.el-date-editor--time {
				width: 160px !important;
				margin-bottom: 5px;
			}
		}
	}
</style>